<template>
  <div class="container-table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="试题编号" prop="number" width="220"></el-table-column>
      <el-table-column label="学科" prop="subject" width="80"></el-table-column>
      <el-table-column label="目录" prop="catalog" width="120"></el-table-column>
      <el-table-column label="题型" prop="questionType" width="100">
        <template slot-scope="{ row }">
          {{ row.questionType | dealquestionType }}
        </template>
      </el-table-column>
      <el-table-column label="题干" prop="question" width="280">
        <template slot-scope="{ row }">
          <span v-html="row.question"></span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" prop="addDate" width="180">
        <template slot-scope="{ row }">
          {{ row.addDate | dealTime }}
        </template>
      </el-table-column>
      <el-table-column label="难度" prop="difficulty" width="100">
        <template slot-scope="{ row }">
          {{ row.difficulty | dealDifficulty }}
        </template>
      </el-table-column>
      <el-table-column label="录入人" prop="creator" width="120"></el-table-column>
      <el-table-column label="审核状态" v-if="!isList">
        <template slot-scope="{ row }">
          {{ row.chkState | dealchekState }}
        </template>
      </el-table-column>
      <el-table-column label="审核意见" prop="chkRemarks" width="200" v-if="!isList"></el-table-column>
      <el-table-column label="审核人" prop="chkUser" width="120" v-if="!isList"></el-table-column>
      <el-table-column label="发布状态" v-if="!isList">
        <template slot-scope="{ row }">
          {{ row | dealPublishState }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" v-if="isList" width="240px">
        <template slot-scope="{ row }">
          <i class="el-icon-view" @click="seeDetail(row)"></i>
          <i class="el-icon-edit" @click="editDetail(row)"></i>
          <i class="el-icon-delete" @click="delDetail(row)"></i>
          <i class="el-icon-check" @click="checkDetail(row)"></i>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" v-else width="240">
        <template slot-scope="{ row }">
          <el-button class="see" @click="lookDetail(row)">预览</el-button>
          <el-button :disabled="!Boolean(row.chkState === 0)" type="text" @click="checkitem(row)">审核</el-button>
          <el-button type="text" :disabled="row | dealState" @click="edit(row)">修改</el-button>
          <el-button @click="shelves(row)" :disabled="Boolean(row.chkState === 0)" type="text">{{ row.publishState ? '下架' : '上架' }}</el-button>
          <el-button type="text" :disabled="row | dealState" @click="delbetter(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <question-pre v-if="dialogVisible" :dialogVisible.sync="dialogVisible" :list="list"></question-pre>
    <question-check @sure="sure" :isDialog.sync="isDialog" :dialogList="dialogList"></question-check>
  </div>
</template>

<script>
import QuestionCheck from './questions-check.vue'
import { detail, choicePublish, remove, choiceCheck, choiceAdd } from '@/api/hmmm/questions'
import QuestionPre from './questions-preview.vue'
import { mapActions } from 'vuex'
import { difficulty, questionType, chkType } from '@/api/hmmm/constants'
import { dealType, dealTime } from '@/api/hmmm/questions-all'
export default {
  components: {
    QuestionPre,
    QuestionCheck
  },
  data () {
    return {
      dialogVisible: false,
      list: {},
      isDialog: false,
      dialogList: {}
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    isList: {
      type: Boolean,
      default: true
    }
  },
  filters: {
    dealquestionType (val) {
      return dealType(val, questionType)
    },
    dealDifficulty (val) {
      return dealType(val, difficulty)
    },
    dealTime (val) {
      return dealTime(val)
    },
    dealchekState (val) {
      return dealType(val + 1, chkType)
    },
    dealPublishState (val) {
      if (val.chkState === 1) {
        return val.publishState ? '已发布' : '已下架'
      }
      return '待发布'
    },
    dealState (val) {
      if (val.chkState === 0) return false
      if (val.publishState === 1) {
        return true
      }
      return false
    }
  },
  methods: {
    async openDetail (val) {
      const { data } = await detail({ id: val.id })
      // console.log(data)
      this.list = data
      this.dialogVisible = true
    },
    ...mapActions('question', ['del']),
    // 查看
    seeDetail (val) {
      this.openDetail(val)
    },
    // 编辑
    async editDetail (val) {
      this.$router.push({ name: 'questions-new', query: { id: val.id } })
    },
    // 删除
    async delDetail (val) {
      if ((this.$parent.$parent.counts - 1) % this.$parent.$parent.pagesize === 0 && this.$parent.$parent.page > 1) {
        this.$parent.$parent.page -= 1
      }
      await this.$alert('确定删除这个题目？', '删除', {
        confirmButtonText: '确定'
      })
      await this.del(val.id)
      this.$parent.$parent.list(this.$parent.$parent.page, 5)
    },
    // 通过
    async checkDetail (val) {
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await choiceAdd({ id: val.id, choiceState: 1 })
      this.$parent.$parent.list(this.$parent.$parent.page, 5)
    },

    // 精选 功能
    // 上下架
    async shelves (value) {
      // console.log(value)
      try {
        if (value.publishState === 1) {
          value.publishState = 0
        } else {
          value.publishState = 1
        }
        await choicePublish(value)
        this.$parent.$parent.getChoiceList({ page: 1, pagesize: 5 })
      } catch (error) {
        console.log(error)
      }
    },
    // 删除
    async delbetter (val) {
      await this.$alert('确定删除这个题目吗？', '提示', {
        confirmButtonText: '确定'
      })
      try {
        if ((this.$parent.$parent.counts - 1) % this.$parent.$parent.pagesize === 0 && this.$parent.$parent.page > 1) {
          this.$parent.$parent.page -= 1
        }
        await remove(val)
        this.$parent.$parent.getChoiceList({ page: this.$parent.$parent.page, pagesize: 5 })
      } catch (error) {
        console.log(error)
      }
    },
    // 预览
    lookDetail (value) {
      this.openDetail(value)
    },
    // 审核
    checkitem (value) {
      this.isDialog = true
      this.dialogList = value
    },
    async sure (chkState, chkRemarks, id) {
      try {
        if (chkRemarks === '') {
          await this.$message({
            message: '请输入审核意见',
            type: 'warning'
          })
        } else {
          await choiceCheck({ id, chkState, chkRemarks })
          this.isDialog = false
          // console.log(this.$parent.$parent.page)
          this.$parent.$parent.getChoiceList({ page: this.$parent.$parent.page, pagesize: 5 })
        }
      } catch (error) {
        console.log(error)
      }
    },
    edit (value) {
      this.$router.push({ name: 'questions-new', query: value })
    }
  }
}
</script>

<style scoped lang="scss">
.el-icon-view,
.el-icon-edit,
.el-icon-delete,
.el-icon-check {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
  margin: 0 10px;
  border: 1px solid;
}
.el-icon-view {
  margin-left: 0;
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    background-color: #409eff;
    border-color: #409eff;
    color: white;
  }
}
.el-icon-edit {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  &:hover {
    background-color: #67c23a;
    border-color: #67c23a;
    color: white;
  }
}
.el-icon-delete {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  &:hover {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: white;
  }
}
.el-icon-check {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  &:hover {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: white;
  }
}
::v-deep.el-button {
  border: 0;
  background-color: transparent;
  width: 36px;
  text-align: center;
  padding: 0;
  &:hover {
    background-color: transparent;
  }
}
::v-deep .see {
  color: #66b1ff !important;
}
</style>
